<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Registration</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--<div id="header" th:replace="pages :: header"></div>-->
<div class="nav" style="height:80px;
       line-height:80px;
       background:#ededed;
       border-radius:0 0 15px 15px;">
    <label style="float:left; width:70px; text-align:center;"><a th:href="@{/auth/login}">Login</a></label>
</div>
<div class="page-header">
    <h1 align="center">Sign up</h1>
</div>

<div style="display: table; margin-right: auto; margin-left: auto;">
    <p th:if="${error}" class="error">Username already exists! Please take another one!</p>
    <form th:action="@{/registration}" method="post" th:object="${registrationForm}">

        <label>Username:</label><br>
        <input type="text" th:field="*{username}"/><br>
        <label class="error" th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Username error</label>
        <br>
        <label>Password:</label><br>
        <input type="password" th:field="*{password}"/><br>
        <label class="error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}">Password error</label>

        <button type="submit">Sign up</button>

        <button type="button"><a th:href="@{/}">Back</a></button>

    </form>
</div>
</body>
</html>